{{extend "tutorial_layout.html"}}

{{block title}}{{super}} - {{=object.tutorial.title}} - {{=object.title}}{{end}}
{{block content}}

{{use "jquery", ui=True}}
{{#use "prettify"}}
{{use "prettify", theme=theme}}
{{use "pageslide"}}
{{use "jqutils",ajaxForm=True}}
{{use "poshytip"}}
{{use "toc"}}
{{use "fontawesome"}}
{{link "tutorials/comment.js"}}
{{#link "scrollbar/nanoscroller.css"}}
{{#link "scrollbar/jquery.nanoscroller.min.js"}}
{{use "totop"}}
{{use "jqhotkeys"}}
<style>
#pageslide {
width:320px;
}
#toc {width:22%;}
/* scrollbar  */
.nano .content      { padding: 10px; }
.nano .pane         { background: #999; }
.nano .pane .slider { background: #111; }

</style>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <ul class="breadcrumb">
              <li>
                <a href="/tutorial">返回</a> <span class="divider">/</span>
              </li>
              <li>
                <a href="/tutorial/read/{{=object.tutorial.id}}">{{=object.tutorial.title}}</a> <span class="divider">/</span>
              </li>
              <li class="active">
                {{=object.title}}
              </li>
            </ul>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span9" id="article">
            {{include "TutorialView/inc_check_browser.html"}}
            <div class="outter">
                {{if prev:}}<div class="chapter-prev chapter-top animated">
                    <a prev-chapter href="/tutorial/view_chapter/{{=prev['id']}}"><i class="icon-arrow-left"></i> {{=prev['title']}}</a>
                </div>{{pass}}
                {{if next:}}<div class="chapter-next chapter-top animated">
                    <a next-chapter href="/tutorial/view_chapter/{{=next['id']}}">{{=next['title']}} <i class="icon-arrow-right"></i></a>
                </div>{{pass}}
                <div class="expander">&raquo;</div>
                <div class="content-inner rounded_bottom article">
                    <h1>{{=object.title}}</h1>
                    <div style="margin-top:-10px;margin-bottom:20px;">
                        <!-- 评论 <a id="global-comment-count" href="/tutorial/view_paragraph_comments/{{=object.id}}?para=0" class="para-comments-count active right animated">0</a> -->
                            <span class="gray">{{=unicode(object.modified_user)}} 于 {{=object.modified_date}} 更新</span>
                            <span class="label label-info">访问次数：{{=object.hits}}</span>
                        
                    </div>
                    
                    {{<< functions.get_var('TUTORIALS/chapter_header')}}
                
                    {{<<object.html}}
                <!-- <hr/>
                    <div id="disqus_thread"></div>
                    <script type="text/javascript">
                       /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
                       var disqus_shortname = 'uliwebzone'; // required: replace example with your forum shortname
            
                       /* * * DON'T EDIT BELOW THIS LINE * * */
                       (function() {
                           var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                           dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                           (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                       })();
                   </script>
                   <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
                   <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
                -->
                    <div class="tutorial-footer">
                        <p>评论 <a id="global-comment-count" href="/tutorial/view_paragraph_comments/{{=object.id}}?para=0" class="para-comments-count active right animated">0</a>
                            <span class="gray">{{=unicode(object.modified_user)}} 于 {{=object.modified_date}} 更新</span>
                        </p>
                    </div>
                    
                    {{<< functions.get_var('TUTORIALS/chapter_footer')}}
                
                    <div class="alert alert-info">
                        <a href="#" class="close" data-dismiss="alert">&times;</a>
                        可以使用<i class="icon-arrow-left"></i>和<i class="icon-arrow-right"></i>来跳转到前一章节或后一章节。
                        还可以使用<b>回车</b>来扩展或缩小文章区域。<b>C</b>键打开评论，<b>ESC</b>关闭评论。
                    </div>
                
                    {{if prev:}}<div class="chapter-prev chapter-down animated">
                        <a prev-chapter href="/tutorial/view_chapter/{{=prev['id']}}"><i class="icon-arrow-left"></i> {{=prev['title']}}</a>
                    </div>{{pass}}
                    {{if next:}}<div class="chapter-next chapter-down animated">
                        <a next-chapter href="/tutorial/view_chapter/{{=next['id']}}">{{=next['title']}} <i class="icon-arrow-right"></i></a>
                    </div>{{pass}}
                    
                </div>
                
            </div>
        </div>
        <div class="span3" id="right-side">
            {{if object.tutorial.authors.has(request.user) or has_role(request.user, 'superuser'):}}
            <div class="btn-toolbar" style="margin-top:0px;position:fixed;">
                <div class="btn-group">
                <a href="/tutorial/edit_chapter/{{=object.id}}" class="btn btn-primary"><i class="icon-edit"></i>编辑</a>
                </div>
                <div class="btn-group">
                <a href="/tutorial/delete_chapter/{{=object.id}}" class="btn btn-danger"><i class="icon-trash"></i>删除</a>
                </div>
            </div>
            {{pass}}
            <div id="toc-container" class="nano">
            <div id="toc" class="content"></div>
            </div>
        </div>
    </div>
</div>
<div id="para-comments" style="display:none;">
</div>
<style>
#toc {top:140px;}
</style>
<script>
    function viewport()
    {
        var e = window, a = 'inner';
        if ( !( 'innerWidth' in window ) )
        {
            a = 'client';
            e = document.documentElement || document.body;
        }
        return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
    }
    
    //滚动插件
    /*(function () {
      $.fn.anchorScroll = function (options) {
        var defaults = {
          speed: 1100,
          fx: "jswing",
          offset: 0
        };
        //var version =  "1.0";
        var options = $.extend(defaults, options);
        return $(this).each(function () {
          var element = this;
          $(element).click(function (event) {
            var elementClick = $(element).attr("href").replace(/\./g, '\\.');
            var destination = $(elementClick).offset().top - options.offset;
            $("html,body").animate({
              scrollTop: destination
            }, options.speed, options.fx);
            //Stop links default events
            event.preventDefault();
            return false;
          })
        })
      }
    })(jQuery);
    */
    

    $(function(){
        //实现代码高亮
        window.prettyPrint && prettyPrint();
        
        //増加标题探测
        //$('body').scrollspy({target:'#titles', offset:50});
        
        $.ajax({
            type:'GET',
            dateType:'json',
            url:'/tutorial/get_paragraph_comments_count/{{=object.id}}',
            success:function(data){
                //増加气泡评论显示
                $('a.comment_point').each(function(index, el){
                    var id = $(el).attr('rel');
                    var count = id in data?data[id]:0;
                    var item = $('<a href="/tutorial/view_paragraph_comments/{{=object.id}}?para=' + id + '" class="para-comments-count animated">'+count+'</a>')
                        .css({position:'absolute', left:'-50px'});
                    $(el).closest('p').prepend(item);
                });
                
                if (data['0']){
                    $('#global-comment-count').text(data['0']);
                }
                //处理pageslide
                $('a.para-comments-count').pageslide({
                    //'href':'#para-comments',
                    iframe:false,
                    direction:'right',
                    width: '400px',
                    onClick: function(e){
                        $('a.para-comments-count').removeClass('active');
                        $(this).addClass('active');
                        //处理toTop
                        reset_totop();
                    },
                    onClose: function(){
                        $('a.para-comments-count').removeClass('active');
                        //处理toTop
                        reset_totop();
                    }
                });
                
            }
        });
        /*
        $('p.tutorial_p').hover(function(e){
            $(this).find('a.para-comments-count').addClass('swing');
        }, function(e){
            $(this).find('a.para-comments-count').removeClass('swing');
        });
        */
        
        $('.chapter-prev, .chapter-next').hover(function(e){
            $(this).animate({opacity:1}, 500);
        }, function(e){
            $(this).animate({opacity:0.5}, 500);;
        });
        
        //増加限制目录区高度的处理
        //$('#titles').height(viewport().height - 160);
        
        //限定pageslide的高度
        //$('#pageslide').height(viewport().height - 160);
        //实现平滑滚动
        //$('#titles a').anchorScroll({offset:50});
        
        function setup_toc(){
            $('#toc').height(viewport().height - $('#toc').offset()['top'] - 40);
            $('#toc').toc({
                'selectors': 'h2,h3', //elements to use as headings
                'highlightOffset': 0, //offset to trigger the next headline
                'offset': 50
            });
        }
        
        setup_toc();
        
        $(window).resize(function(){
        	setup_toc();
        });
        
        
        //増加代码提示
        $('pre, .inline-tag').code_comment();
        
        //处理回到顶部显示
        $('.outter').UItoTop({ easingType: 'easeOutQuart', text:'<i class="icon-arrow-up"></i>回到顶部' });
        
        //处理动态滚动条
        //$("#toc-container").nanoScroller();
        
        //处理左键，右键前后翻页
        $(document).bind('keydown.left', function(){
            var el = $('a[prev-chapter]');
            if (el.length>0){
                el[0].click();
            }
        }).bind('keydown.right', function(){
            var el = $('a[next-chapter]');
            if (el.length>0){
                el[0].click();
            }
        }).bind('keydown.return', function(){
            $('.expander').click();
        }).bind('keydown.c', function(){
            $('a.para-comments-count').click();
        });
        
        function reset_totop(){
            var top = $('#toTop');
            var that = $('.outter');
            var left = $(that).outerWidth() + $(that).offset().left + 2;
            top.offset({left:left, bottom:10});
        }
        
        //处理expander事件，如果点击，则隐藏目录栏
        $('.expander').click({'opened':false}, function(e){
            if (!e.data.opened){
                $('#article').removeClass('span8').addClass('span12');
                $('#right-side').removeClass('span4').hide();
                e.data.opened = true;
                $(this).html('&laquo;');
            }else{
                $('#article').removeClass('span12').addClass('span8');
                $('#right-side').addClass('span4').show();
                e.data.opened = false;
                $(this).html('&raquo;');
            }
            //处理toTop
            reset_totop();
        });
        
        //处理标题hover
        $('.article').find('h1,h2,h3,h4,h5,h6').hover(function(e){
           $(this).find('a.anchor').css('color', '#c60f0f');
        }, function(e){
           $(this).find('a.anchor').css('color', 'white');
        });
        
    });
</script>
{{end}}

{{block after_footer}}
<!-- bottomlinks -->
{{end}}
